<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>房源列表</title>
    <script src="js/axios.min.js"></script>
    <script src="js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="ele-2.15.7/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="ele-2.15.7/index.js"></script>
</head>

<style>
    .msg{
        color: red;
    }
    .box-card {
        width: 100%;
        height: 200px;
        margin: auto;
        margin-top:30px ;
    }

    .container-filter{
        height: 140px;
    }

    .operate-container{
        height: 60px;
        margin-bottom:20px;
    }

    .btn-add{
        font-size: 14px;
        float: right;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }


</style>
<body>
<div id="app">
    <div class="main-container">
        <div class="el-card box-card container-filter">
            <div class="el-card__body">
                <div>
                    <div class="search-top ">
                        <i class="el-icon-search"></i>
                        <span> 筛选搜索</span>
                        <el-button style="float: right;font-size: 12px" class="el-button--primary" @click="query(1)">查询结果</el-button>
                        <el-button style="float: right;font-size: 12px; margin-right: 15px" @click="resetInput">重置</el-button>
                    </div>
                    </button>
                </div>
            </div>

            <div style="margin-top: 15px;">
                <el-form :inline="true"  class="demo-form-inline" style="margin-left: 20px">
                    <el-form-item label="输入搜索:">
                        <el-input v-model="id" placeholder="房屋编号"></el-input>
                    </el-form-item>
                    <el-form-item label="房客编号:">
                        <el-input v-model="guestId"  placeholder="房客编号"></el-input>
                    </el-form-item>
                    <el-form-item label="房屋价格:">
                        <el-cascader
                                :options="options"
                                @change="change"
                                clearable></el-cascader>
                    </el-form-item>
                </el-form>
            </div>

        </div>

        <el-card class="box-card operate-container box-card " shadow="never">
            <i class="el-icon-tickets"></i>
            <span>数据列表</span>
        </el-card>

        <div class="table-container box-card">
            <el-table :header-cell-style="{'text-align':'center'}"  :cell-style="{'text-align':'center'}" border  :data="tableData.data.records" style="width: 100%" >
                <el-table-column fixed prop="id" label="房屋编号" width="60"></el-table-column>
                <el-table-column prop="province" label="省" width="80"></el-table-column>
                <el-table-column prop="city" label="市" width="80"></el-table-column>
                <el-table-column prop="region" label="区" width="80"></el-table-column>
                <el-table-column prop="address" label="房屋详细地址"width="160" ></el-table-column>
                <el-table-column prop="guestId" label="房客编号"width="60">
                    <template slot-scope="scope">
                        <span v-if="scope.row.guestId!=0">{{scope.row.guestId}}</span>
                        <span v-else>暂未出租</span>
                    </template>
                </el-table-column>
                <el-table-column prop="masterId" label="房东编号"width="60" ></el-table-column>
                <el-table-column prop="area" label="房间面积"width="80" ></el-table-column>
                <el-table-column prop="type" label="租房方式(整租/合租)"width="80" ></el-table-column>
                <el-table-column prop="price" label="房子价格" width="100">
                    <template slot-scope="scope">
                        <span>{{scope.row.price}}元</span>
                    </template>
                </el-table-column>
                <el-table-column prop="scale" label="房子规格" width="150"></el-table-column>
                <el-table-column prop="introduce" label="房子内部及周边介绍" width="240" ></el-table-column>
                <el-table-column label="操作" >
                    <template slot-scope="scope">
                        <el-button  size="mini" @click="modify(scope.row)">编辑</el-button>
                        <el-button  size="mini" type="danger" @click="remove(scope.row)">删除</el-button>
                    </template>
                </el-table-column>

            </el-table>
            <el-footer style="text-align: center">
                <el-pagination :page-size="pageSize" @current-change="query" @size-change="sizeChange"
                               background :page-sizes="[10,15,20]"
                               layout="total,sizes,prev, pager,next,jumper"
                               :total="tableData.total"
                               :current-page.sync="tableData.data.current">
                </el-pagination>
            </el-footer>
        </div>
    </div>
    <el-dialog style="width: 1300px;margin-left: 350px"  title="房屋编辑" :visible.sync="dialogFormVisible" :close-on-click-modal = "false">
        <div style="display: flex; justify-content: space-around;">
            <el-form>
                <el-form-item label="省" :label-width="formLabelWidth">
                    <el-input v-model="HouseData.province" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="市" :label-width="formLabelWidth">
                    <el-input v-model="HouseData.region" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="区" :label-width="formLabelWidth">
                    <el-input v-model="HouseData.address" autocomplete="off"></el-input>
                    <span class="msg">{{errors.address}}</span>
                </el-form-item>

                <el-form-item label="房客编号" :label-width="formLabelWidth">
                    <el-input v-model="HouseData.guestId" autocomplete="off"></el-input>
                    <span class="msg">{{errors.idNumber}}</span>
                </el-form-item>

                <el-form-item label="房东编号" :label-width="formLabelWidth">
                    <el-input v-model="HouseData.masterId" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="房屋面积" :label-width="formLabelWidth">
                    <el-input v-model="HouseData.area" autocomplete="off"></el-input>
                    <span class="msg">{{errors.area}}</span>

                </el-form-item>

                <el-form-item label="租房方式" :label-width="formLabelWidth">
                    <el-input v-model="HouseData.type" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="房屋价格" :label-width="formLabelWidth">
                    <el-input v-model="HouseData.price" autocomplete="off"></el-input>
                    <span class="msg">{{errors.price}}</span>

                </el-form-item><el-form-item label="房屋规格" :label-width="formLabelWidth">
                    <el-input v-model="HouseData.scale" autocomplete="off"></el-input>
                <span class="msg">{{errors.scale}}</span>
                </el-form-item>

                <el-form-item label="房屋介绍" :label-width="formLabelWidth">
                    <el-input v-model="HouseData.introduce" autocomplete="off"></el-input>
                    <span class="msg">{{errors.introduce}}</span>
                </el-form-item>
            </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveUser">确 定</el-button>
        </div>

    </el-dialog>

</div>
<script>
    var v = new Vue({
        el : "#app",
        data : {
            options:[
                {
                    value: "0,1000",
                    label: '1000以下'
                },
                {
                    value:"1000,2000",
                    label: '1000-2000'
                },
                {
                    value:"2000,3000",
                    label: '2000以上'
                }
            ],
            id : "",
            province : "",
            city : "",
            region : "",
            address : "",
            guestId : "",
            masterId : "",
            area : "",
            type : "",
            price : "",
            scale : "",
            introduce : "",
            pageSize: 10,
            //表格数据
            tableData: {},
            HouseData:{},
            value:"",
            dialogFormVisible: false,
            errors:{}
        },
        created() {
            this.query(1);
        },
        methods : {
            saveUser(){
                axios.post("/house/save",this.HouseData).then(res=>{
                    if (res.data.code){
                        this.$message("修改成功");
                        this.query(1); // 刷新表格
                        this.dialogFormVisible = false; // 关闭弹窗
                    }else {
                        this.errors={};
                        for (var name in this.HouseData){
                            var  errMsg=res.data.data.filter(err=> err.field==name)
                                .map(err=>err.defaultMessage).join(",");
                            this.errors[name]=errMsg;
                        }
                    }
                })
            },
            change(value){
                this.value=value[0];
            },
            query(page) {
                axios.get("/house/background",{
                    params: {
                        id:this.id,
                        guestId:this.guestId,
                        value:this.value,
                        page: page, //当前页数
                        pageSize: this.pageSize //每页显示条目个数
                    }
                }).then(res => {
                    this.tableData = res.data;
                })
            },
            sizeChange(page) {
                this.pageSize = page;
                this.query(1);
            },
            //查询框重置
            resetInput(){
                this.id = "";
                this.guestId = "";
                this.value = "";
            },
            create() {
                this.HouseData = {province: "", city: "", region: "", address: "", guestId: "", masterId: "", area: "",type : "",price : "",scale : "",introduce : ""};
                this.dialogFormVisible = true;
            },
            // 修改
            modify(data) {
                this.create();
                for (let i in data) {
                    this.HouseData[i] = data[i];
                }
                this.dialogFormVisible = true;
            },
            //删除
            remove(data){
                this.$confirm('此操作将永久删除该f房屋, 是否继续?', '提示', {
                    type: 'warning'
                }).then(() => {
                    axios.get("/house/delete",{
                        params: {
                            id : data.id,
                        }
                    }).then(()=>{
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.query(1);
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
        },
    })
</script>
</body>
</html>